<template>
  <div class="allin">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="list.community"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in list.houseImg" :key="item.houseCode">
        <img :src="'http://liufusong.top:8080/' + item" />
      </van-swipe-item>
    </van-swipe>
    <div class="message">
      <van-row type="flex" justify="center">
        <van-col span="24" class="dec">{{ list.title }}</van-col>
        <van-col span="24" class="traffic">近地铁</van-col>
      </van-row>
      <div class="houseType">
        <van-row gutter="20" type="flex" justify="center" class="red">
          <van-col span="8">{{ list.price }}/月</van-col>
          <van-col span="8">{{ list.roomType }}</van-col>
          <van-col span="8">{{ list.size }}平米</van-col>
        </van-row>
        <van-row gutter="20" type="flex" justify="center" class="ccc">
          <van-col span="8">租金</van-col>
          <van-col span="8">房型</van-col>
          <van-col span="8">面积</van-col>
        </van-row>
      </div>
      <van-row class="more">
        <van-col span="12">装修：<span>精装</span></van-col>
        <van-col span="12"
          >朝向：<span v-for="item in list.oriented" :key="item.houseCode"
            >{{item}}</span
          ></van-col
        >
      </van-row>
      <van-row class="more">
        <van-col span="12">楼层：<span>低楼层</span></van-col>
        <van-col span="12">类型：<span>普通住宅</span></van-col>
      </van-row>
    </div>
    <div class="houseName">
      <p>小区：天山星城</p>
      <img src="../components/map图片.png" alt="" class="map" />
      <h4>房屋配套</h4>
      <van-row
        class="packge"
        v-for="item in list.supporting"
        :key="item.houseCode"
      >
        <van-col span="24">{{ item }}</van-col>
        <!-- <van-col span="12">空调</van-col> -->
      </van-row>
    </div>
    <div class="overview">
      <h4>房屋概况</h4>
      <van-row class="houseview">
        <van-col span="17">
          <van-row class="onwer">
            <van-col span="8" class="img">图片</van-col>
            <van-col span="10"
              ><p>王女士</p>
              <p class="name">已认证房主</p></van-col
            >
          </van-row>
        </van-col>
        <van-col span="7" class="mes">发消息</van-col>
      </van-row>
      <p class="info">
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </p>
    </div>

    <div class="detail_bottom">
      <span>
        <van-button type="default">
          <div>
            <van-icon
              name="star-o"
              @click="toggleCollect(list.houseCode)"
              :class="{ active: !collectFlag }"
            />
            收藏
          </div>
        </van-button>
      </span>
      <van-button type="default">在线咨询</van-button>
      <van-button type="info">电话预约</van-button>
    </div>
  </div>
</template>

<script>
import { getHome, addCollect, delCollect } from '@/api/user'
export default {
  name: 'detail',
  data () {
    return {
      list: {},
      res: '',
      collectFlag: true
    }
  },
  async created () {
    const data = await getHome(this.$route.query.id)
    this.list = data.body
    console.log(data.body)
  },
  methods: {
    async toggleCollect (id) {
      if (this.collectFlag) {
        this.collectFlag = !this.collectFlag
        this.$toast.success('收藏成功')
        await addCollect(id)
      } else {
        await delCollect(id)
        this.$toast.fail('取消收藏')
      }
    }
  }
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
.load {
  position: absolute;
  top: 40%;
  text-align: center;
  width: 100%;
  height: 100%;
}
.allin {
  color: #333;
  background-color: #f6f5f6;
}
img {
  width: 100%;
  height: 252px;
}
.message {
  background-color: #fff;
}
.dec {
  margin-top: 25px;
  margin-left: 8px;
  font-style: 16px;
}
.traffic {
  width: 46px;
  height: 18px;
  text-align: center;
  font-size: 12px;
  color: #39becd;
  background: #e1f5f8;
  border-radius: 3px;
  margin-right: 312px;
  margin-top: 10px;
  line-height: 18px;
}
.houseType {
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  margin: 15px 0;
  padding: 15px 0;
  text-align: center;
}
.red {
  color: #fa5741;
  font-size: 18px;
  font-weight: bolder;
}
.ccc {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}
.more {
  font-size: 13px;
  margin-top: 5px;
  padding-bottom: 10px;
  margin-left: 8px;
  color: #999;
}
.more span {
  color: #000;
}
.map {
  z-index: 9;
  overflow: hidden;
  user-select: none;
  width: 375px;
  height: 145px;
}
.HousePackage {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background: #fff;
}
.packge {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-top: 1px solid #cecece;
}
.houseName {
  margin-top: 10px;
  background-color: #fff;
}
.houseName h4 {
  margin-top: 10px;
  margin-left: 8px;
}
.houseName p {
  margin-top: 10px;
  margin-left: 8px;
  padding-top: 10px;
  padding-left: 8px;
  padding-bottom: 8px;
  font-size: 13px;
}
.overview {
  background-color: #fff;
}
.overview .mes {
  width: 85px;
  color: #33be85;
  border: 1px solid #33be85;
  border-radius: 3px;
  padding: 3px 15px;
}
.overview .name {
  font-size: 13px;
  color: #fa5741;
}
.overview .info {
  padding: 8px;
  font-size: 14px;
}
.overview h4 {
  margin-top: 10px;
  margin-left: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.overview .img {
  margin-left: 10px;
}
.detail_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
}
.van-button {
  width: 125px;
  height: 50px;
  font-size: 17px;
}
.active {
  background: #fec635;
  color: #fff;
}
</style>
